<template>
  <div class='dictIndex' style='height: 100%'>
    <div style='height: 100%'>
      <el-radio-group v-model="dataLayout" style="float: right;">
        <el-radio-button label="Table"/>
        <el-radio-button label="Json"/>
      </el-radio-group>
      <el-table :data='tableData' style='width: 100%;height: 90%' v-if="dataLayout === 'Table'">
        <el-table-column prop='acdKey' label='KEY' min-width='180'/>
        <el-table-column prop='acdValue' label='VALUE' min-width='180'/>
        <el-table-column prop='lastUpdateName' label='最后修改人' min-width='180'/>
        <el-table-column prop='lastUpdateAt' label='最后修改时间' min-width='180'/>
        <el-table-column label='操作' width="200px">
          <template #default='scope'>
            <el-button size='small' @click='handleEdit( scope.row)'
            >修改
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <format :content="JsonData" v-if="dataLayout === 'Json'"></format>
      </div>
    </div>
  </div>
</template>
<script>
import {getConfig} from '@/api/config/config';
import Format from '~/utils/format';

export default {
  name: 'dictIndex',
  components: {
    Format,
  },
  watch: {
    '$store.state.app.system': {
      handler() {
        this.initData();
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      tableData: [],
      JsonData: {},
      currentPage: 1,
      pageSize: 1,
      dataLayout: 'Table',
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const systemCode = this.$store.state.app.system;
      if (systemCode) {
        getConfig(systemCode).then(({code, data}) => {
          if (code === 200) {
            this.tableData = data;
          }
        }).catch(err => {
          console.log(err);
        });
      } else {
        this.$message.warning("请选择系统");
      }
    },
    handleEdit(row) {
      console.log(row);
    }
  },
}
</script>
